<template>
  <div>
    <Layer :layer="layer" @confirm="submit" ref="layerDom" @close="cancel">
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        style="margin-right: 30px"
      >
        <el-form-item label="字典名称" prop="dictName">
          <el-input
            v-model="form.dictName"
            placeholder="请输入字典名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="字典编码" prop="dictCode">
          <el-input
            v-model="form.dictCode"
            placeholder="请输入字典编码"
            clearable
          />
        </el-form-item>
        <el-form-item label="排序">
          <el-input
            v-model="form.sortNumber"
            placeholder="请输入排序数字"
            clearable
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择状态" clearable>
            <el-option
              v-for="item in statusArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="dictRemark">
          <el-input
            type="textarea"
            max="100"
            v-model="form.dictRemark"
            placeholder="请输入备注,不能超过100个字符"
            :autosize="true"
          ></el-input>
        </el-form-item>
      </el-form>
    </Layer>
  </div>
</template>
<script>
import Layer from "_c/layer/index.vue";
import { addDictType, editDictType } from "@/api/dictType.js";
import {
  defineComponent,
  reactive,
  ref,
  getCurrentInstance,
  onMounted,
} from "vue";
import { statusArr } from "../enum";
import { ElMessage } from "element-plus";
export default defineComponent({
  components: {
    Layer,
  },
  props: {
    //用于控制对话框
    layer: {
      type: Object,
      default: () => {
        return {
          show: false,
          title: "",
          showButton: true,
        };
      },
    },
  },
  setup(props, ctx) {
    const { proxy } = getCurrentInstance();
    //表单数据
    const form = ref({
      id: "" || undefined,
      dictName: "",
      dictCode: "",
      sortNumber: "" || undefined,
      status: "",
      dictRemark: "" || undefined,
    });
    //校验规则
    const rules = {
      dictName: [
        { required: true, message: "请输入字典名称", trigger: "blur" },
      ],
      dictCode: [
        { required: true, message: "请输入字典编码", trigger: "blur" },
      ],
      status: [{ required: true, message: "请选择状态", trigger: "blur" }],
      dictRemark: [{ required: false }],
    };
    const submit = () => {
      if (proxy.$refs["ruleForm"]) {
        //规则校验
        proxy.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            let params = form.value;
            if (props.layer.row) {
              updateForm(params);
            } else {
              addForm(params);
            }
          } else {
            return false;
          }
        });
      }
    };
    //更新数据
    const updateForm = async (obj) => {
      if (obj) {
        const data = await editDictType(obj);
        if (data.success) {
          props.layer.show = false;
          cancel();
          ctx.emit("getTableData");
          ElMessage.success("操作成功！");
        }
      }
    };
    //新增数据
    const addForm = async (obj) => {
      console.log(obj);
      if (obj) {
        const data = await addDictType(obj);
        if (data.success) {
          props.layer.show = false;
          cancel();
          ctx.emit("getTableData");
          ElMessage.success("操作成功！");
        }
      }
    };
    //关闭对话框
    const cancel = () => {
      proxy.$refs["ruleForm"].resetFields();
    };
    //挂载
    const init = () => {
      if (props.layer.row) {
        form.value = JSON.parse(JSON.stringify(props.layer.row));
      }
    };
    init();
    return {
      form,
      rules,
      statusArr,
      submit,
      cancel,
    };
  },
});
</script>
<style lang="scss" scoped>
.layer {
  width: 500px;
}
</style>
